<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="https://unpkg.com/vue@next"></script>
  <title>Document</title>
</head>
<body>
  <h5>vue3生命周期 beforeCreate created beforeMount mounted beforeUpdate updated beforeUnmount ummounted</h5>
  <h5>在 DOM 中使用模板时 (直接在一个 HTML 文件里撰写模板)，还需要避免使用大写字符来命名键名，因为浏览器会把 attribute 名全部强制转为小写：例子03所示</h5>
  <div id="app">
    <p>counter: {{counter}} <button @click="toadd">点击加1</button></p>
    <div>
      <todo-item :name="name"></todo-item>
    </div>
    <!-- 动态绑定 为啥这个结果不对呢？需要从新打开一次页面，否则内容更新不了-->
    <a v-bind:[key]="url" @click.prevent = "tojump">测试连接{{attrubuteName}}</a>
    <a v-bind:[attrName]="url" @click.prevent = "tojump">例子03 绑定的属性值避免使用驼峰模式</a>
  </div>
  <script>
    const options = {
      data() {
        return {
          counter: 1,
          name: 'Jerry',
          key: 'href',
          attrName: 'href',
          url: 'http://www.baidu.com'
        }
      },
      methods: {
        toadd() {
          this.counter ++
        },
        tojump() {

        }
      }
    }
    // const vm = Vue.createApp(options).mount('#app')
    const app = Vue.createApp(options)
    // 组件
    app.component('todo-item', {
      props: {
        name: {
          type: String,
          default: 'Tom'
        }
      },
      template: `<p>this is {{name}} todo</p>`,
    })
    app.mount('#app')
  </script>
</body>
</html>